<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        html,body{
            height: 100%;
        }
        body{
            margin: 0;
            background: url("img/bg1.jpg") no-repeat 0 0/100% 100%; 
        }
        .header{
            height: 70px;
            background-color:rgba(0,0,0,0.6);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .left{
            width: 479px;
            height: 16px;
            /* background-color: #f0ad4e; */
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-left: 36px; 
        }

        .right{
            width: 177px;
            height: 16px;
            /* background-color: blue; */
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: white;
            margin-right: 36px;
        }
        .right img{
            width: 30px;
            border-radius: 50%;
        }

        .set{
            width: 54px;
           
        }

        .logo{
            height: 164px;
            /* background-color: #fff; */
            display: flex;
            justify-content: center;
            align-items: flex-end;
            
        }

        .logo img{
            height: 75px;
        }

        .search{
            height: 75px;
            /* background-color: cornflowerblue; */
            display: flex;
            justify-content: center;
            align-items: flex-end;
        }

        .input{
            width: 630px;
            height: 40px;
            border: 2px solid #c4cccf;
            padding: 0;
        }

        .btn{
            width: 124px;
            height: 44px;
        }
        input{
            outline: none;
        }

        main {
            width: 80%;
            height: autopx;
            margin: 123px auto 0px auto;
            padding: 1.2rem;
            background-color: white;
            border-radius: 20px;
            opacity: 0.8;
            display: flex;
                justify-content: space-between;
            align-items: center;
            
        }

        main .picture {
            flex: 5;
        }

        main .picture img {
            width: 100%;
        }

        main .news {
            flex: 3;
            padding: 0px;
            list-style: none;
            display: flex;
            flex-direction:column;
            margin-left: 15px;

        }


    </style>
</head>
<body>
    <div class="header">
        <div class="left">
            <span>新闻</span>
            <span>官网</span>
            <span>地图</span>
            <span>直播</span>
            <span>视频</span>
            <span>贴吧</span>
            <span>学术</span>
            <span>更多</span>

        </div> 
        <div class="right">
            <span class="set">设置</span>
            <img src="img/lyj.png">
            <span >落樱街</span>
        </div>
    </div>
    <div class='logo'>
        <img src="img/落樱街logo.png" >
    </div>
    <div class="search">
        <input type="text" class="input">
        <input type="button" value="百度一下" class="btn">
    </div>
    
    <script>
        let text = document.querySelector('.input');
        let btn = document.querySelector('.btn');

        btn.onclick = function(){
            window.location.href = 'http://www.baidu.com/s?wd='+text.value;
        }
    </script>
        </div>

        <main>
            <div class="picture">
                <img src="./img/韶华初音高清壁纸.png" alt="右侧图片">
            </div>
            <ul class="news">
                    <li><a href="https://baike.baidu.com/item/%E8%90%BD%E6%A8%B1%E8%A1%97%E5%8A%A8%E6%BC%AB%E7%A4%BE/20606687?fr=aladdin">关于落樱街动漫社</a></li>
                    <li><a href="https://space.bilibili.com/21982411?from=search&seid=9615318165187703973">落樱街动漫社B站传送门</a></li>
                    <li><a href="https://www.bilibili.com/video/BV1ga4y1L7kP?from=search&seid=11875068535393329989">落樱街の苦痛 忆·当年吃人的日子</a></li>
                    <li><a href="https://www.bilibili.com/video/BV1zX4y1G7EV?from=search&seid=7890565291359289182">涉疆谎言如同沙丘上的城堡，是迟早要破产的</a></li>
                    <li><a href="https://www.bilibili.com/video/BV1oo4y197Uz?from=search&seid=7350810286911287688">金灿荣答韩国KBS记者：“战狼外交”是维护国家利益</a></li>
                    <li><a href="https://www.bilibili.com/video/BV1fU4y1W7LV?from=search&seid=6774619319000208513">解放军驻港部队教授港警中式步操</a></li>
                    <li><a href="https://t.bilibili.com/?spm_id_from=333.337.b_696e7465726e6174696f6e616c486561646572.28">史上首次！NASA“毅力”号录下了来自火星的声音</a></li>

            </ul>    
            
        </main>
    
</body>
</html>